<template>
  <div id="question" style="margin-bottom: 5px;">
    <el-row>
      <el-col :span="2">
        <div style="text-align: right; margin-right: 5px; margin-top: 3px;">
          <div>
            <el-button class="arrow" icon="el-icon-arrow-up" plain type="success" @click="up"></el-button>
          </div>
          <div>
            <el-button class="arrow" icon="el-icon-arrow-down" plain type="success" @click="down"></el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="22" style="margin-bottom: 2px;">
        <div>
          <div class="title" @click="switchContentShow"> <!-- question section -->
            <div
              v-if="selected"
              class="inline-block"
              style="width: 6px; height: 16px; background-color: #2DB7A0; border-radius: 3px; position: absolute; top: 17px;"></div>
            <div
              v-else
              class="inline-block"
              style="width: 6px; height: 16px; background-color: #7e89a4; border-radius: 3px; position: absolute; top: 17px;"></div>
            <div :title="questionTitle" class="inline-block"
                 style="position: absolute; left: 20px; overflow: hidden; width: 90%; height: 100%">
              <span v-if="questionData.multiple"
                    style="font-size: 16px; vertical-align: bottom" v-html="'(多选)' + questionData.name"></span>
              <span style="font-size: 16px; vertical-align: bottom" v-else v-html="'(单选)' + questionData.name"></span>
            </div>
            <div style="position: absolute; right: 18px; top: 0;">
              <i :class="{active: selected, inactive: !selected}" class="el-icon-caret-right"></i>
            </div>
          </div>
          <div> <!-- content -->
            <div v-if="selected" style="width: 100%;">
              <div>
                <QuestionItem
                  v-for="(item, idx) in questionData.items"
                  :key="item.id"
                  :idx="idx"
                  v-model="questionData.items[idx]"
                  :value="item"
                  @down="positionDown"
                  @input="change"
                  @up="positionUp"
                  @add-item="addItem"
                  @delete-item="deleteItem"/>
              </div>
              <div style="text-align: right;">
                <div class="inline-block">
                  <el-button plain type="success" @click="editQuestion">编辑题干</el-button>
                </div>
                <div class="inline-block">
                  <el-button plain type="danger" @click="deleteQuestion">删除本题</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import QuestionItem from "./QuestionItem";

  export default {
    name: "Question",
    components: {
      QuestionItem
    },
    props: ["value", 'idx'],
    data() {
      return {
        questionData: {
          id: 0,
          name: "", // 题干名称
        multiple: false, // 是否是多选
        items: []
      },
      selected: false,
      questionTitle: ""
    }
  },
  methods: {
    change() {
      this.$emit("input", this.questionData)
    },
    switchContentShow() {
      this.selected = !this.selected
    },
    up() {
      this.$emit("up", this.idx)
    },
    down() {
      this.$emit("down", this.idx)
    },
    positionUp(idx) { // 向上调整问题选项位置
      if (idx > 0) {
        // 修改对象在数组中的位置
        let tempItem = {}
        tempItem.score = this.questionData.items[idx - 1].score
        tempItem.describe = this.questionData.items[idx - 1].describe
        this.questionData.items[idx - 1].score = this.questionData.items[idx].score
        this.questionData.items[idx - 1].describe = this.questionData.items[idx].describe
        this.questionData.items[idx].score = tempItem.score
        this.questionData.items[idx].describe = tempItem.describe

        this.change()
      }
    },
    positionDown(idx) {
      if (idx < this.questionData.items.length - 1) {
        // 修改对象在数组中的位置
        let tempItem = {}
        tempItem.score = this.questionData.items[idx + 1].score
        tempItem.describe = this.questionData.items[idx + 1].describe
        this.questionData.items[idx + 1].score = this.questionData.items[idx].score
        this.questionData.items[idx + 1].describe = this.questionData.items[idx].describe
        this.questionData.items[idx].score = tempItem.score
        this.questionData.items[idx].describe = tempItem.describe

        this.change()
      }
    },
    addItem() {
      this.questionData.items.push({
        id: this.questionData.items[this.questionData.items.length - 1].id + 1,
        score: 0,
        describe: ""
      })
      this.change()
    },
    deleteItem(idx) {
      this.questionData.items.splice(idx, 1)
      this.change()
    },
    editQuestion() {
      this.$emit("edit-question", this.questionData)
    },
    deleteQuestion() {
      this.$emit("delete-question", this.idx)
    }
  },
  created() {
    this.questionData = this.value
    this.questionTitle = this.questionData.name
  }
}
</script>

<style scoped>

.arrow {
  height: 20px;
  width: 50px;
  padding: 0;
}

.title {
  height: 50px;
  background-color: #F0F8F8;
  line-height: 50px;
  position: relative;
  padding-left: 10px;
  cursor: pointer;
}

.inline-block {
  display: inline-block;
}

.active {
  transform: rotate(90deg);
  transition: all 200ms;
}

.inactive {
  transition: all 200ms;
}
</style>
